<template>
	<view class="allclass">
		<scroll-view  class="scroll-view" scroll-y="true" refresher-enabled="true"
		  :refresher-triggered="triggered"  
			@refresherrefresh="pulldown" >
				<view class="backBox"></view>
				<!-- 胶囊 -->
				<view class="jn" :style="{background:scrollJudge?'white':'transparent'} ">
					<view class="top" :style="{height:top+'px'}"></view>
					<!-- nav -->
					<view class="nav" :style="{height:Jnheight+statusBarHeights+'px'}">
						<view class="headerBox"
							:style="{background:scrollJudge?'white':'transparent'}">
							<view class="titleBoxh">
								<view class="title">禹冰之家</view>
								<view class="tips">防水协会监督.质量100%保证</view>
							</view>
							<view class="wxBox" :style="{height:Jnheight+statusBarHeights + 'px'}"></view>
						</view>
					</view>
				</view>
		
		    <Search></Search>
				<view class="mainBody">
					<view class="classList">
						<view class="item" @click="getClass" :class="id == 0?'act':''">
							热门服务
						</view>
						<view class="item" @click="getDetail(item.id)" :class="item.id == id?'act':''"
							v-for="(item,index) in classList" :key="index">
							{{item.name}}
						</view>
					</view>
					<view class="content" v-if="id === 0">
						<view class="itemBox">
							<view class="title">热门服务</view>
							<view class="itemList">
								<view class="item" @click="hottoDetail" :data-id="item.id" :data-catid="item.catId" :key="index"
									v-for="(item,index) in hotClass">
									<image class="img" mode="aspectFill" :src="item.icon"></image>
									<view class="name">{{item.name}}</view>
								</view>
							</view>
						</view>
					</view>
					<view class="content" v-else>
						<view class="itemBox" v-for="(item,index) in detail" :key="index">
							<view class="title">{{item.name}}</view>
							<view class="itemList">
								<view class="item" @click="toDetail(itemC.id)" :key="indexC"
									v-for="(itemC,indexC) in item.item">
									<image class="img" mode="aspectFill" :src="itemC.icon"></image>
									<view class="name">{{itemC.storeName}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view @click="toShopCar" class="shopCarBox">
					<view class="num" v-if="carNum != 0">{{carNum}}</view>
					<view class="icon">
						<uni-icons color="white" size="30" type="cart"></uni-icons>
					</view>
				</view>

		</scroll-view>
		
	</view>
</template>

<script setup>
	import Search from '../index/search.vue'
	import {reactive,ref,getCurrentInstance,onMounted} from 'vue'
	import {onLoad,onShow} from "@dcloudio/uni-app"
	import {storeToRefs} from "pinia";//结构才需要引入
	import {useNavStore} from '@/store/index.js'//引入空间
	const navStore = useNavStore()//给空间命名
	const { statusBarHeights,top,Jnheight,categoryid,carNum} = storeToRefs(navStore);//解构数据
	const {proxy} = getCurrentInstance()
	const triggered = ref(false)
	
  const classList = ref([])
	const hotClass = ref([])
	const detail = ref([])
	const searchValue = ref('')
	const swipersearchList = ref([])
	const swiperid = ref(0)
	const id = ref(0)
	const scrollobj= reactive({
		triggered:false,
		page:1,
		isloading:false,
		total:0,
		isjz:false
	})
	onMounted(()=>{
		id.value = categoryid
		getClass()
		getData()
		
	}) 
	
	const toShopCar=()=>{
		uni.navigateTo({
			url:'/pages/shopcar/shopcar'
		})
	}
	//分类列表
	const getData=async()=> {
		const result = await proxy.$api.classList()
		if(result.code==200){
			classList.value = result.data
			console.log('分类列表',result.data);
		}
	}
	
	const hottoDetail=(e)=> {
		console.log(e);
		var catid = e.currentTarget.dataset.catid
		var id = e.currentTarget.dataset.id
		if(catid!=null){
			id.value = catid
			getDetail(catid)
		}else{
			toDetail(id)
		}
	}
	const toDetail=(id)=> {
		uni.navigateTo({
			url: '/pages-detail/shop-detail/shop-detail?id=' + id
		})
	}
	
	//分类商品
	const getDetail=async(e)=> {
		console.log(navStore.categoryid);
		if(navStore.categoryid!=0){
			id.value = navStore.categoryid
			navStore.$patch({ categoryid: navStore.categoryid = navStore.categoryid })
		}
		if(e){
			id.value = e
			navStore.$patch({ categoryid: navStore.categoryid = e })
		}
		var data = {categoryId: id.value}
		const result= await proxy.$api.classDetail(data)
		if(result.code==200){
			detail.value = result.data.services
			triggered.value=false
			console.log('分类商品',result.data.services);
		}
	}
	defineExpose({
		getDetail
	})
	const getClass=async()=> {
			id.value = 0
			navStore.$patch({ categoryid: navStore.categoryid = 0 })
			const result= await proxy.$api.services()
			if(result.code==200){
			hotClass.value = result.data
			triggered.value=false
			}
	}
	//下拉刷新
	const pulldown=()=>{
		hotClass.value=[]
		detail.value=[]
		triggered.value=true
		getDetail()
		getClass()
	}

</script>

<style lang="scss">
	.backBox {
		background: linear-gradient(180deg, rgba(116, 190, 255, 0.2) 0%, rgba(116, 190, 255, 0.1) 57%, rgba(252, 223, 79, 0) 94%);
		width: 100vw;
		height: 18vh;
		position: absolute;
		top: 0;
		// filter: blur(80px);
		
	}
	.scroll-view{
		height: 100vh;width: 750rpx;background-color: #f8f8f8;
	}
	.top{
		display: flex;align-items: center;justify-content: space-between;
	}
	.nav{
		width: 750rpx;display: flex;align-items: center;justify-content: space-between;
	}
	.allclass{
		width: 750rpx;height: 100vh;
	}
	.nav{
	height: $statusBar;
	}
	.mainBody {
		display: flex;
		justify-content: space-between;
		margin-top:20rpx;

		.classList {
			display: flex;
			flex-direction: column;
			width: 110px;
			text-align: center;
			position: sticky;
			left: 0px;
			top: 0px;

			.act {
				background: $linerBlue;
				color: #fff !important;
				font-weight: bold !important;
			}

			.item {
				padding: 15px 00px;
			}
		}

		.content {
			box-sizing: border-box;
			width: calc(100vw - 110px);
			background-color: white;
			padding: 10px 20px;
			height: 90vh;

			.itemBox {
				width: 100%;
				margin-bottom: 20px;

				.title {
					font-weight: bold;
					margin-bottom: 10px;
				}

				.itemList {
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;

					.item {
						width: 28%;
						display: flex;
						flex-direction: column;
						align-items: center;
						margin: 0px 5px;
						

						.img {
							width: 45px;
							height: 45px;
							margin-bottom: 5px;
						}

						.name {
							font-size: 12px;
							color: $grey;
							width: 100%;
							text-align: center;
							height: 38px;
						}
					}
				}

			}
		}
	}

	.headerBox {
		transition: all 0.5s;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 0 40rpx;
		
		position: sticky;
		top: 0;
		z-index: +1000;
	
		.titleBoxh {
			display: flex;
			justify-content: start;
			align-items: flex-end;
	
			.title {
				font-weight: bold;
				font-family: '禹冰之家';
				font-size: 36rpx;
				
				color: black;
			}
	
			.tips {
				color: black;
				font-size: 26rpx;
				margin-left: 5px;
				font-weight: bold;
				color: #51a0fd;
				font-style: italic;
			}
		}
	
		.wxBox {
			width: 87px;
			height: 0px;
		}
	}
	
	.searchBox {
		position: relative;
		z-index: +10;
		padding: 0 20px;
		height: 66rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 20rpx;
	
		.address {
			font-size: 14px;
			margin-right: 2px;
		}
	
		.search {
			display: flex;
			align-items: center;
			padding: 0 10px;
			background-color: white;
			border-radius: 10px;
			width: calc(100% - 80px);
	
			.icon {
				margin-right: 10px;
			}
		}
	
		.rightBox {
			background: $linerBlue;
			padding: 9px;
			border-radius: 9px;
	
			.iconBox {
				width: 16px;
				height: 16px;
				display: flex;
				justify-content: center;
				align-items: center;
	
				.icon {
					color: white !important;
					font-size: 16px !important;
					font-weight: bold;
				}
			}
		}
	}
  .shopCarBox{
  	position: fixed;
  	right: 10px;
  	bottom: 120px;
  	background-color: white;
  	padding: 10px;
  	border-radius: 50%;
  	z-index: +999;
  	background: $linerBlue;
  	.num{
  		width: 20px;
  		height: 20px;
  		background-color: $red;
  		color: white;text-align: center;
  		border-radius: 50%;
  		position: absolute;
  		right: 0px;
  		top: 0px;
  	}
  }
	page {
		background-color: $MainBackColor;
		overflow: hidden;
	}
</style>
